<template>
    <div>
        <h1>用户修改页面</h1>
        <table class="table">
            <tr>
                <td align="right">编号</td>
                <td><input type="text" v-model="info.number" disabled> </td>
            </tr>
              <tr>
                <td align="right">姓名</td>
                <td><input type="text" v-model="info.name" disabled> </td>
            </tr>
             <tr>
                <td align="right">密码</td>
                <td><input type="password" v-model="info.pwd"> </td>
            </tr>
             <tr>
                <td align="right">出生日期</td>
                <td><input type="date" v-model="info.barthday"> </td>
            </tr>
             <tr>
                <td align="right">年龄</td>
                <td><input type="text" v-model="info.age"> </td>
            </tr>
            <tr>
                <td align="right">状态</td>
                <td>
                    <select v-model="info.stateId">
                        <option value="">请选择</option>
                        <option v-for="c in lest" :value="c.stateId">{{c.sdateName}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">是否入职</td>
                <td> <input type="radio"  v-model="info.isDeleted" :value="true">成功
                    <input type="radio"  v-model="info.isDeleted" :value="false">失败
                </td>
            </tr>
             <tr>
                <td align="right">性别</td>
                <td> <input type="radio" name="sex" v-model="info.sex" value="1">男
                    <input type="radio" name="sex" v-model="info.sex" value="2">女
                </td>
            </tr>
            <tr>
                <td align="right">图像</td>
                <td>
                    <input type="file" @change="imgs"/>
                    <img :src="info.img" width="100" height="100" v-if="info.img!=''"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="修改" @click="add"></td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import{ref,reactive,onMounted} from 'vue'
import{useRouter,useRoute} from 'vue-router'
import moment from 'moment'
const route=useRoute();
const router=useRouter();
onMounted(()=>{
getone();
const nums =Math.floor(Math.random()*(999-100+1)*100).toString();
const datas = moment(new Date()).format("YYYYMMdd");
info.number=datas+nums
})
const lest:any=ref([])
const getone=()=>{
    axios.get('https://localhost:7113/api/Emp/emyployeeTypes',lest.value).then(res=>{
        lest.value=res.data
    })
}
let info:any=reactive({

  number: "",
  "name": "",
  "pwd": "",
  "barthday": "",
  "age": "",
  "img": "",
  "isDeleted": false,
  "stateId": "",
  "sex": ""
})
const add=()=>{
    axios.put('https://localhost:7113/api/Emp/UpdateEmp',info).then(res=>{
        console.log(info)
         if(res.data>0)
         {
            alert('修改成功')
            router.push('/');

         }
         else
         {
            alert('修改失败')
            return;
         }
    })
}
const imgs =(e:any)=>{
    let obj = e.target.files[0]
    let f = new FormData();
    f.append('file',obj);
    axios.post('https://localhost:7113/api/Photo/Photo',f).then(res=>{
        info.img=res.data;
    })
}
onMounted(()=>{
    getData();
})
const getData = () => {
  axios.get("https://localhost:7113/api/Emp/Find",{params:{id:route.query.id}})
    .then((res) => {
      console.log(res);
      Object.assign(info, res.data);
      info.barthday = res.data.barthday.substring(0, 10); 
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped>

</style>
